<template>
	<el-scrollbar :max-height="maxHeight!" style="padding-right: 10px">
		<el-timeline v-loading="tableLoading">
			<el-card v-if="userLogTableData.length === 0" class="text-center">
				<p>{{ '暂无数据' }}</p>
			</el-card>
			<el-timeline-item v-for="(item,index) of userLogTableData" v-else :key="'userLogTableData_' + index"
			                  :timestamp="formatDateTime(item.createTime, 'yyyy-MM-dd hh:mm:ss.SSS')" center placement="top">
				<el-card>
					<h4>{{ item.methodDescription }}</h4>
					<p>{{ item.message }}</p>
				</el-card>
			</el-timeline-item>
		</el-timeline>
	</el-scrollbar>
	<cus-pagination id="profile-log-pagination" v-model="userLogTableData" v-model:loading="tableLoading" :pageSize="10" :params="params" show-refresh
	                url="/system/sys-myself/pageMyselfSystemLog"/>
</template>

<script lang="ts" setup>

import {nextTick, onMounted, reactive, ref} from 'vue'
import {useUserStore} from '@/stores/modules/user.store'
import CusPagination from '@/components/cus-pagination.vue'
import {formatDateTime} from '@/utils/commonUtil'
import type {DebouncedFunc} from 'lodash-es'
import {debounce} from 'lodash-es'
import {calcMaxHeightWithExtra} from '@/utils/layoutUtil'
import {useEventListener} from '@vueuse/core'

const userStore = useUserStore()

const tableLoading = ref(false)
const userLogTableData = ref<SysLog[]>([])
const params = reactive({
	operator_eq: userStore.username
})
const maxHeight = ref<number>()

// 计算最大高度
const getMaxHeight: DebouncedFunc<() => typeof getMaxHeight> = debounce(() => {
	maxHeight.value = calcMaxHeightWithExtra(80, '#profile-log-pagination')
	return getMaxHeight
}, 100, {
	leading: true,
	trailing: false,
	maxWait: 100
})

onMounted(() => {
	nextTick(() => {
		useEventListener(window, 'resize', getMaxHeight()!)
	})
})

</script>

<style lang="scss" scoped>
</style>
